import { View, Text, ImageBackground, SafeAreaView } from "react-native";
import React from "react";
import beachImage from "../assets/meditation-images/beach.webp";
import CustomButton from "@/components/CustomButton";
import { useRouter } from "expo-router";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import AppGradient from "@/components/AppGradient";
const App = () => {
  const router = useRouter();
  const insets = useSafeAreaInsets();
  return (
    <View className="flex-1">
      <ImageBackground
        source={beachImage}
        resizeMode="cover"
        className="flex-1"
      >
        <AppGradient
          colors={["rgba(0,0,0,0.4)", "rgba(0,0,0,0.8)"]}
        >
          <SafeAreaView className="flex flex-1 px-1 justify-between p-10">
            <Text className="text-center text-white font-bold text-4xl">
              简单冥想
            </Text>
            <Text className="text-center text-white font-regular text-2xl mt-3">
              简化每个人的冥想
            </Text>
            <CustomButton
              onPress={() => router.push("/nature-meditate")}
              title="Get Started"
            />
          </SafeAreaView>
        </AppGradient>

      </ImageBackground>




    </View>
  );
};

export default App;
